<template>
  <page-view class="page-view">
    <PalyListTop
      :name="'评论(' + total + ')'"
      icon_name2="#icon-fenxiang"
    ></PalyListTop>
    <div class="song">
      <img
        :src="$route.query.picUrl"
        alt=""
        style="
          width: 50px;
          height: 50px;
          border-radius: 50%;
          vertical-align: middle;
        "
      /><span style="margin-left: 5px; font-size: 14px">{{
        $route.query.name
      }}</span
      >-<span style="font-size: 12px; color: rgba(0, 0, 0, 0.5)">{{
        $route.query.author
      }}</span>
    </div>
    <div class="gray"></div>
    <!-- 评论区 -->
    <div class="commentArea">
      <div class="top">评论区</div>
      <pull-refresh v-model="refreshing" @refresh="onRefresh">
        <list
          v-model:loading="loading"
          :finished="finished"
          finished-text="全部加载完了。。。"
          @load="onLoad"
        >
          <div
            class="commentItem"
            v-for="(item, index) in comments"
            :key="index"
          >
            <div class="left">
              <img
                :src="item.user.avatarUrl"
                alt=""
                style="width: 100%; height: 50px; border-radius: 50%"
              />
            </div>
            <div class="right">
              <p style="font-size: 13px">{{ item.user.nickname }}</p>
              <p>
                <span style="display: inline-block; transform: scale(0.5)">{{
                  item.timeStr
                }}</span>
              </p>
              <p style="margin-top: 5px; font-size: 15px">{{ item.content }}</p>
              <div class="likeCount" style="font-size: 10px">
                {{ item.likedCount }}
                <svg
                  class="icon"
                  aria-hidden="true"
                  @click="change(item)"
                  v-if="!item.show"
                >
                  <use xlink:href="#icon-dianzan"></use>
                </svg>
                <svg
                  class="icon"
                  aria-hidden="true"
                  @click="change(item)"
                  v-else
                >
                  <use xlink:href="#icon-dianzan_kuai"></use>
                </svg>
              </div>
            </div>
          </div>
        </list>
      </pull-refresh>
    </div>
  </page-view>
</template>

<script>
import PalyListTop from "../components/playListTop.vue";
import { useRoute, useRouter } from "vue-router";
import Api from "../utils/api";
import { onBeforeMount, onMounted, reactive } from "@vue/runtime-core";
import { ref, toRefs } from "vue";
import { List, PullRefresh, Toast } from "vant";
export default {
  name: "Comment",
  components: { PalyListTop, List, PullRefresh, Toast },
  setup() {
    const router = useRouter();
    const route = useRoute();
    // 是否显示加载状态
    const loading = ref(false);
    // 是否加载完成
    const finished = ref(false);
    // 下拉刷新
    const refreshing = ref(false);
    let commentInfo = reactive({
      total: 0,
      //   最热评论
      //   hotComments: [],
      //总页数
      pageCount: 0,
      //当前页数索引
      pageIndex: 1,
      totalCount: 0,
      //   最新评论
      comments: [],
    });

    const getComment = async (id) => {
    if (commentInfo.pageIndex === 1) commentInfo.comments.length = 0;
      loading.value = true;
      let results = await Api.Comment.getComment(
        id,
        (commentInfo.pageIndex - 1) * 15
      );
      console.log("处理前的所有结果", results);
      commentInfo.total = results.total;
      results.comments.forEach((item, index) => {
        item.show = false;
      });
      commentInfo.comments.push(...results.comments);
      console.log("处理后的所有结果", commentInfo.comments);
      commentInfo.pageCount = parseInt(results.total / 15);
      loading.value = false;
      finished.value = commentInfo.pageIndex >= commentInfo.pageCount;
      refreshing.value = false;
    };

    // 单曲 下滚懒加载菜单
    const onLoad = () => {
      console.log(111);
      if (commentInfo.pageIndex < commentInfo.pageCount) {
        console.log(222);
        commentInfo.pageIndex += 1;
        getComment(route.query.id, (commentInfo.pageIndex - 1) * 15);
      }
    };
    // 单曲 下拉刷新菜单
    const onRefresh = () => {
      finished.value = false;
      refreshing.value = true;
      commentInfo.comments.length = 0;
      getComment(route.query.id, (commentInfo.pageIndex - 1) * 15);
    };

    //点赞

    const change = (item) => {
      item.show = !item.show;
    };

    onMounted(() => {
      getComment(route.query.id);
      //通过id获取歌名信息
    });
    return {
      getComment,
      ...toRefs(commentInfo),
      change,
      refreshing,
      loading,
      finished,
      onRefresh,
      onLoad,
    };
  },
};
</script>

<style lang="less" scoped>
.song {
  width: 6.5rem;
  height: 50px;
  // background-color: orange;
  margin: auto;
}
.gray {
  width: 100%;
  height: 5px;
  background-color: rgb(247, 247, 247);
}
.commentArea {
  width: 6.5rem;
  height: 493px;
  overflow: auto;
  // background-color: orange;
  margin: auto;
  .top {
    width: 100%;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    font-weight: bold;
  }
  .commentItem {
    width: 100%;
    // height: 118px;
    // background-color: skyblue;
    // border: 1px solid black;
    display: flex;

    & > div {
      // border: 1px solid black;
    }
    .left {
      width: 50px;
    }
    .right {
      flex: 1;
      padding: 10px 0px;
      position: relative;
      .likeCount {
        width: 100px;
        // background-color: yellow;
        text-align: right;
        height: 28px;
        line-height: 28px;
        position: absolute;
        top: 10px;
        right: 10px;
        .icon {
          width: 20px;
          height: 20px;
          vertical-align: -3px;
        }
      }
    }
  }
}
</style>